<ion-view left-buttons="leftButtons" class="view-wallet"
          id="wallet">
  <ion-nav-title>
    <!-- no title-->
  </ion-nav-title>

  <ion-nav-buttons side="secondary" >

    <cs-extension-point name="nav-buttons"></cs-extension-point>

    <button class="button button-icon button-clear icon ion-android-more-vertical visible-xs visible-sm"
            id="helptip-wallet-options-xs"
            ng-click="showActionsPopover($event)">
    </button>
  </ion-nav-buttons>

  <ion-content scroll="true" class="refresher-top-bg refresher-light"
               bind-notifier="{ rebind:settings.useRelative, locale:$root.settings.locale.id}">

    <ion-refresher pulling-text="{{'COMMON.BTN_REFRESH' | translate}}"
                   on-refresh="doUpdate(true)">
    </ion-refresher>

    <div class="positive-900-bg hero" id="wallet-header"
         ng-class="{'hero-qrcode-active': toggleQRCode}">
      <div class="content" ng-if="!loading">

        <i class="avatar"
           ng-if=":rebind:!formData.avatar"
           ng-class=":rebind:{'avatar-wallet': !formData.isMember, 'avatar-member': formData.isMember}"></i>
        <i class="avatar"
           ng-if=":rebind:formData.avatar"
           style="background-image: url({{:rebind:formData.avatar.src}})"></i>
        <h3 class="light">
          <ng-if ng-if=":rebind:formData.name">{{:rebind:formData.name}}</ng-if>
          <ng-if ng-if=":rebind:!formData.name && formData.uid">{{:rebind:formData.uid}}</ng-if>
          <ng-if ng-if=":rebind:!formData.name && !formData.uid"><i class="ion-key"></i> {{:rebind:formData.pubkey | formatPubkey}}</ng-if>
        </h3>

        <h4 class="assertive"><ng-if ng-if=":rebind:(formData.name || formData.uid) && !formData.isMember" translate>WOT.NOT_MEMBER_PARENTHESIS</ng-if></h4>
      </div>
      <h4 class="content light" ng-if="loading">
        <ion-spinner icon="android"></ion-spinner>
      </h4>
    </div>

    <div ng-attr-id="{{ qrcodeId }}"
         class="qrcode spin"
         ng-class="{'active': toggleQRCode}"
         ng-click="toggleQRCode = !toggleQRCode"></div>

    <!-- Buttons bar-->
    <a id="wallet-share-anchor"></a>
    <div class="hidden-xs hidden-sm padding text-center" ng-if="!loading">

      <button class="button button-stable button-small-padding icon ion-android-share-alt ink"
              ng-click="showSharePopover($event)"
              title="{{'COMMON.BTN_SHARE' | translate}}">
      </button>

      <button class="button button-stable button-small-padding icon ion-loop ink"
              ng-click="doUpdate()"
              title="{{'COMMON.BTN_REFRESH' | translate}}">
      </button>

      <cs-extension-point name="buttons"></cs-extension-point>

      &nbsp;&nbsp;

      <button id="helptip-wallet-options"
              class="button button-stable icon-right ink"
              ng-click="showActionsPopover($event)">
        &nbsp; <i class="icon ion-android-more-vertical"></i>&nbsp;
        {{:locale:'COMMON.BTN_OPTIONS' | translate}}
      </button>

      <div ng-if="formData.requirements.needRenew">
        <br/>
        <button class="button button-raised button-stable  ink"
                ng-click="renewMembership()">
          <i class="icon ion-alert-circled assertive"></i>
          <span class="assertive">{{:locale:'ACCOUNT.BTN_MEMBERSHIP_RENEW' | translate}}</span>
        </button>
      </div>
    </div>

    <div class="visible-xs visible-sm padding text-center" ng-if="!loading">
      <button class="button button-assertive button-small-padding ink"
              ng-if="isDefaultWallet"
              ng-click="logout({askConfirm: true})">
        <i class="icon ion-log-out"></i>
        {{'COMMON.BTN_LOGOUT' | translate}}
      </button>
      <div ng-if="formData.requirements.needRenew">
        <br/>
        <button class="button button-raised icon-left button-stable button-small-padding ink"
                ng-click="renewMembership()">
          <i class="icon ion-loop assertive"></i>
          <span class="assertive">{{:locale:'ACCOUNT.BTN_MEMBERSHIP_RENEW' | translate}}</span>
        </button>
      </div>
    </div>

    <div class="row no-padding">
      <div class="col col-20 hidden-xs hidden-sm">&nbsp;</div>

      <div class="col">

        <div class="list" ng-class="::motion.ionListClass" ng-hide="loading">

          <span class="item item-divider" translate>WOT.GENERAL_DIVIDER</span>

          <!-- Public key -->
          <div id="helptip-wallet-pubkey"
                class="item item-icon-left item-text-wrap ink"
                on-hold="copy(formData.pubkey)"
                copy-on-click="{{:rebind:formData.pubkey}}">
            <i class="icon ion-key"></i>
            <span>{{:locale:'COMMON.PUBKEY'|translate}}</span>
            <h4 id="pubkey" class="dark">{{:rebind:formData.pubkey}}</h4>
          </div>

          <!-- Uid + Registration date -->
          <ion-item class="item-icon-left" ng-if=":rebind:formData.sigDate||formData.uid">
            <i class="icon ion-calendar"></i>
            <span translate>COMMON.UID</span>
            <h5 class="dark" ng-if=":rebind:formData.sigDate">
              <span translate>WOT.REGISTERED_SINCE</span>
              {{:rebind:formData.sigDate | medianDate}}
            </h5>
            <span class="badge badge-stable">{{:rebind:formData.uid}}</span>
          </ion-item>

          <!-- Certifications -->
          <a id="helptip-wallet-certifications"
             class="item item-icon-left item-icon-right item-text-wrap ink"
             ng-if="formData.isMember||formData.requirements.pendingMembership||!formData.requirements.needSelf"
             ng-click="showCertifications()">
            <i class="icon ion-ribbon-b"></i>
            <b ng-if="formData.requirements.isSentry" class="ion-star icon-secondary" style="color: yellow; font-size: 16px; left: 25px; top: -7px;"></b>
            {{:locale:'ACCOUNT.CERTIFICATION_COUNT'|translate}}
            <cs-badge-certification requirements="formData.requirements"
                                    parameters="::currency.parameters">
            </cs-badge-certification>
            <i class="gray icon ion-ios-arrow-right"></i>
          </a>

          <!-- Signature stock -->
          <a id="helptip-wallet-given-certifications"
             class="item item-icon-left item-text-wrap item-icon-right ink visible-xs visible-sm"
             ng-if="formData.isMember"
             ng-click="showGivenCertifications()">
            <i class="icon ion-ribbon-a"></i>
            <span translate>WOT.GIVEN_CERTIFICATIONS.SENT</span>
            <i class="gray icon ion-ios-arrow-right"></i>
          </a>

          <!-- Account transaction -->
          <a class="item item-icon-left item-icon-right ink"
             ng-click="showTxHistory()">
            <i class="icon ion-card"></i>
            <span translate>WOT.ACCOUNT_OPERATIONS</span>
            <i class="gray icon ion-ios-arrow-right"></i>
          </a>

          <!-- Other wallets -->
          <a class="item item-icon-left item-icon-right ink visible-xs visible-sm"
             ng-if="isDefaultWallet"
             ui-sref="app.view_wallets">
            <i class="icon ion-card " style="top: -5px; left: 22px; font-size: 18px;"></i>
            <i class="icon-secondary ion-card" style="top: 22px; left: 19px; font-size: 20px; background-color: white; width:17px; height: 14px;"></i>
            <span translate>ACCOUNT.WALLET_LIST.TITLE</span>
            <span class="badge badge-calm" ng-if="formData.children.length>0">{{:rebind:formData.children.length}}</span>
            <i class="gray icon ion-ios-arrow-right"></i>
          </a>

          <!-- Events -->
          <span class="item item-divider" ng-if="formData.events.length">
            {{:locale:'ACCOUNT.EVENTS' | translate}}
          </span>

          <div
            class="item item-text-wrap item-icon-left item-wallet-event"
            ng-repeat="event in formData.events">
            <i class="icon"
               ng-class="{'ion-information-circled royal': event.type=='info','ion-alert-circled assertive': event.type=='warn'||event.type=='error','assertive': event.type=='error','ion-clock': event.type=='pending'}"></i>
            <span trust-as-html="event.message | translate:event.messageParams"></span>
          </div>


          <cs-extension-point name="general"></cs-extension-point>

          <cs-extension-point name="after-general"></cs-extension-point>


       </div>
      </div>

      <div class="col col-20 hidden-xs hidden-sm">&nbsp;
      </div>
    </div>
  </ion-content>

</ion-view>
